<template>
    <div>
        <!--广告浮标-->
        <div id="float-pannel-gloable">
            <img class="float-image" src="https://p1-q.mafengwo.net/s15/M00/DB/AC/CoUBGV46Y9uASEabAADjvDxsun4743.png" style="width:149px;height:118px;">
        </div>

        <div id="banner-con-gloable">
            <div class="banner-btn-con">
                <img class="close-btn" src="https://b3-q.mafengwo.net/s13/M00/D4/58/wKgEaVy2p62AGOH3AAABJOUoO8M240.png">
            </div>
            <div class="banner-image-con">
                <img :src="pic" style="height: 179px">
            </div>
        </div>
    </div>
</template>

<script>
    import pic from "@/assets/index-images/CoUBGV3ndZqAKMIkAAFZLYeROIA369.png";
    export default {
        name: "Drogue",
        data(){
            return{pic};
        },
        mounted() {
            this.Drogue();
        },
        methods:{
            Drogue(){
                // eslint-disable-next-line no-undef
                $(function() {
                    // eslint-disable-next-line no-undef
                    var floatBottomBoxPannelDom = $("#float-pannel-gloable");
                    // eslint-disable-next-line no-undef
                    var floatBottomBoxBannerConDom = $("#banner-con-gloable");
                    // 过滤的URL规则，匹配不展示的页面
                    // var flag = location.href.match(/www\.(mafengwo|\S+)\.(cn|ab)\/(hotel|wenda)/g) ||
                    //     location.href.match(/passport\.(mafengwo|\S+)\.(cn|ab)\/setting/g) ||
                    //     location.href.match(/gonglve\/ziyouxing\/(modify|home|comment)/g) ||
                    //     location.href.match(/(note|ginfo)\/(create|create_index)\.php/g);
                    // if(!flag){
                    //     // 如果当前页面URL不在过滤列表之内，判断是否展示
                    // }

                    var bottomAdStatus = getCookie('bottom_ad_status');
                    if(bottomAdStatus === '0') {
                        closeBanner();
                    } else {
                        showBanner();
                    }

                    function scrollFn() {
                        window.removeEventListener("scroll", scrollFn);
                        closeBanner(true);
                    }

                    // 浮标非关闭按钮部分点击
                    // eslint-disable-next-line no-undef
                    $('#float-pannel-gloable .float-image').click(function() {
                        // 浮标点击上报
                        reportFloatClick();
                        showBanner(true);
                    });

                    // banner关闭按钮点击
                    // eslint-disable-next-line no-undef
                    $('#banner-con-gloable .close-btn').click(function() {
                        closeBanner(true);
                    });

                    // 浮标关闭按钮点击
                    // $("#float-pannel-gloable .float-btn").click(function () {
                    //     floatBottomBoxBannerConDom.animate({ left:-window.innerWidth,},1000,'swing');
                    //     setTimeout(function () {
                    //         floatBottomBoxPannelDom.animate({ left:-230,},800,'swing');
                    //         floatBottomBoxBannerConDom.hide();
                    //     }, 1000);
                    // });

                    // value 1为显示，0为收起
                    function setCookie(name, value) {
                        var time = 24 * 60 * 60 * 1000;
                        var exp = new Date().setHours(0, 0, 0, 0);
                        var expires = new Date(exp + time);
                        document.cookie = name + '=' + escape(value) + ';expires=' + expires.toGMTString() + ';path=/';
                    }

                    function getCookie(name) {
                        var arr = null;
                        var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                        // eslint-disable-next-line no-redeclare
                        var arr = document.cookie.match(reg);
                        if(arr) {
                            return unescape(arr[2]);
                        } else {
                            return null;
                        }
                    }

                    function showBanner(useAnimation) {
                        // 显示banner
                        floatBottomBoxPannelDom.animate({
                            left: -230,
                        }, useAnimation ? 500 : 0, 'swing');
                        setTimeout(function() {
                            floatBottomBoxBannerConDom.show();
                            floatBottomBoxBannerConDom.css('width', '100%');
                            floatBottomBoxBannerConDom.animate({
                                left: 0,
                            }, useAnimation ? 1000 : 0, 'swing');
                            window.addEventListener("scroll", scrollFn);
                        }, 800);
                        setCookie('bottom_ad_status', 1);
                    }

                    function closeBanner(useAnimation) {
                        floatBottomBoxBannerConDom.animate({
                            left: -window.innerWidth,
                        }, useAnimation ? 1000 : 0, 'swing');
                        setTimeout(function() {
                            floatBottomBoxPannelDom.animate({
                                left: 0,
                            }, useAnimation ? 800 : 0, 'swing');
                            // 浮标曝光
                            reportFloatExposure();
                            floatBottomBoxBannerConDom.hide();
                        }, 1000);
                        setCookie('bottom_ad_status', 0);
                    }

                    // banner曝光事件上报
                    // eslint-disable-next-line no-unused-vars
                    function reportBannerExposure() {
                        if(window.mfwPageEvent) {
                            // banner曝光
                            // eslint-disable-next-line no-undef
                            mfwPageEvent('sales', 'show_index_index', {
                                pos_id: 'index.index.floatbanner.x',
                                module_name: '浮标大广告位',
                                item_source: 'float',
                                item_uri: window.location.href,
                            })
                        }
                    }

                    // 浮标点击事件上报
                    function reportFloatClick() {
                        if(window.mfwPageEvent) {
                            // 浮标点击事件上报
                            // eslint-disable-next-line no-undef
                            mfwPageEvent('sales', 'click_index_index', {
                                pos_id: 'index.index.floaticon.x',
                                module_name: '浮标广告位',
                                item_source: 'float',
                                item_uri: window.location.href,
                            })
                        }
                    }

                    // 浮标曝光事件上报
                    function reportFloatExposure() {
                        if(window.mfwPageEvent) {
                            // eslint-disable-next-line no-undef
                            mfwPageEvent('sales', 'show_index_index', {
                                pos_id: 'index.index.floaticon.x',
                                module_name: '浮标广告位',
                                item_source: 'float',
                                item_uri: window.location.href,
                            })
                        }
                    }
                });
            }
        }
    }
</script>

<style scoped>
    #banner-con-gloable {
        display: block;
        position: fixed;
        bottom: 0;
        left: -100%;
        z-index: 110;
        width: 100%;
        height: 179px;
        overflow-x: hidden;
    }

    #banner-con-gloable .banner-btn-con {
        width: 100%;
        height: 162px;
        background: #0C151E;
        opacity: .8;
        position: absolute;
        bottom: 0;
    }

    #banner-con-gloable .banner-btn-con .close-btn {
        position: absolute;
        right: 35px;
        top: 24px;
        z-index: 120;
        height: 24px;
        width: 24px;
        cursor: pointer;
    }

    #banner-con-gloable .banner-image-con {
        position: absolute;
        right: 50%;
        bottom: 0;
        width: 1000px;
        margin-right: -500px;
    }

    #float-pannel-gloable {
        padding-left: 0;
        padding-bottom: 30px;
        display: block;
        position: fixed;
        bottom: 0;
        z-index: 110;
        left: -230px;
    }

    #float-pannel-gloable .float-btn {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 100;
    }

    #closed {
        height: 24px;
        width: 24px;
        vertical-algin: top;
        border: none;
        cursor: pointer;
    }
</style>
